<template>
  <div class="banner-bg" :style="{ 'background-image': bg }">
    <div class="container">
      <div class="home-banner">
        <!-- 左侧分类 -->
        <HomeCategory></HomeCategory>
        <!-- 轮播图 -->
        <xtxCarousel
          :imgList="imgList"
          :autoPlay="true"
          :duration="1000"
          @current="currentIndex"
        ></xtxCarousel>
      </div>
    </div>
  </div>
</template>

<script>
import HomeCategory from './Home-category.vue'
import { homeBanner } from '@/api/home'
import xtxCarousel from '@/components/library/xtx-carousel'
import { ref } from 'vue'
export default {
  name: 'HomeBanner',
  components: {
    HomeCategory,
    xtxCarousel
  },
  setup (props, context) {
    const imgList = ref([])
    const bg = ref('')
    const imgArr = [
      () => require('@/assets/images/bg1.jpg'),
      () => require('@/assets/images/bg2.jpg'),
      () => require('@/assets/images/bg3.jpg'),
      () => require('@/assets/images/bg4.jpg'),
      () => require('@/assets/images/bg5.jpg')
    ]

    homeBanner().then(res => {
      imgList.value = res.result
    })
    function currentIndex (index) {
      if (imgList.value.length > 0) {
        const imgUrl = imgArr[index]
        bg.value = `url(${imgUrl})`
      }
    }

    return { imgList, bg, currentIndex }
  }
}
</script>

<style lang="less" scoped>
.banner-bg {
  width: 100%;
  height: 500px;
  position: relative;
  background: #eee no-repeat center;
  background-size: 200%;
  overflow: hidden;
  z-index: 1;
  &:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /* 从父元素继承 background 属性的设置 */
    background: inherit;
    // filter: blur(50px);
    z-index: 2;
  }
}
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  .xtx-carousel {
    ::v-deep .carousel-btn.prev {
      left: 270px;
    }
    ::v-deep .carousel-indicator {
      padding-left: 250px;
    }
  }
}
</style>
